<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <svg width="400" height="400" viewBox="0 0 100 100">
      <defs>
        <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stop-color="#f00" stop-opacity="1" />
          <stop offset="100%" stop-color="#ff0" stop-opacity="1" />
        </linearGradient>
      </defs>

      <rect x="10" y="10" width="80" height="40" fill="url(#gradient1)" />
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">
      <defs>
        <linearGradient id="gradient2" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stop-color="#f00" stop-opacity="1" />
          <stop offset="100%" stop-color="#ff0" stop-opacity="1" />
        </linearGradient>
      </defs>

      <rect x="10" y="10" width="80" height="40" fill="url(#gradient2)" />
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">
      <defs>
        <linearGradient id="gradient3" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="#f00" stop-opacity="1" />
          <stop offset="100%" stop-color="#ff0" stop-opacity="1" />
        </linearGradient>
      </defs>

      <rect x="10" y="10" width="80" height="40" fill="url(#gradient3)" />
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">
      <defs>
        <linearGradient id="gradient4" x1="30%" y1="100%" x2="70%" y2="100%">
          <stop offset="0%" stop-color="#f00" stop-opacity="1" />
          <stop offset="50%" stop-color="#0f0" stop-opacity="1" />
          <stop offset="100%" stop-color="#ff0" stop-opacity="1" />
        </linearGradient>
      </defs>

      <rect x="10" y="10" width="80" height="40" fill="url(#gradient4)" />
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">
      <defs>
        <linearGradient id="gradient5" x1="50%" y1="100%" x2="100%" y2="100%">
          <stop offset="50%" stop-color="#f00" stop-opacity="1" />
          <stop offset="100%" stop-color="#ff0" stop-opacity="1" />
        </linearGradient>
      </defs>

      <rect x="10" y="10" width="80" height="40" fill="url(#gradient5)" />
    </svg>

    <script src="index.js"></script>
  </body>
</html>
